<template>
  <div>
    <form class="form-cont">
      <div class="form-title">
        <p>车辆具体情况</p>
      </div>
      <div class="form-baseinput">
        <div class="form-basetop basetop-weui form-show">
          <x-input title="驾驶员：" v-model="driveName"  readonly disabled placeholder="驾驶员"></x-input>
        </div>
        <div v-if="!stateX" class="form-group formline form-weui">
          <!--<label>日期：</label>
          <input type="date" name="title" id="checkTime" class="form-control" v-model="list.checkTime"  placeholder="日期">-->
          <datetime v-model="list.checkTime" title="日期：" class="from-contrl" placeholder="日期"></datetime>
        </div>
        <div v-if="stateX" class="form-basetop basetop-weui form-show">
          <x-input title="日期：" v-model="list.checkTime"  readonly></x-input>
        </div>
        <!--<div class="form-group formline">
          <label>所在城市：</label>
          <input type="text" name="title" class="form-control" v-model="list.checkCity" disabled placeholder="所在城市">
        </div>-->
        <div class="form-basetop basetop-weui form-show">
          <x-input title="所在城市：" v-model="list.checkCity"  readonly disabled placeholder="所在城市"></x-input>
        </div>
        <div class="form-basetop basetop-weui form-show">
          <x-input title="行驶证：" v-model="list.driveNumber"  readonly disabled placeholder="行驶证"></x-input>
        </div>
        <div class="form-basetop basetop-weui form-show">
          <x-input title="车牌号：" v-model="list.carNumber"  readonly disabled placeholder="车牌号"></x-input>
        </div>
        <div class="form-basetop basetop-weui">
          <x-input title="车辆型号：" v-model="list.carModel"  readonly disabled placeholder="车辆型号"></x-input>
        </div>
        <!--<div class="form-group formline">
          <label>行驶证：</label>
          <input type="text" name="title" class="form-control" v-model="list.driveNumber" disabled placeholder="行驶证">
        </div>
        <div class="form-group formline">
          <label>车牌号：</label>
          <input type="text" name="title" class="form-control" v-model="list.carNumber" disabled placeholder="车牌号">
        </div>
        <div class="form-group formline">
          <label>车辆型号：</label>
          <input type="text" name="title" class="form-control" v-model="list.carModel" disabled placeholder="车辆型号">
        </div>-->
      </div>


      <div class="form-title clearFix">
        <p>详细项目</p>
      </div>
      
      <div class="radioallcont">
        <div class="checkAnsower" v-for="item in answerList">
          <p class="totletip">{{item.typeName}} <i class="ion ion-chevron-down"></i></p>
          <ul>
            <li v-for="ans in item.dataList">
                <span>{{ans.dataContent}}</span>
                <div class="radioBox">
                  <label>
                    <i class="ion ion-checkmark-circled"></i>
                    <input type="radio" :name="ans.id" :value="ans.id+'-Y'" checked="">  是
                  </label>
                  <label>
                    <i class="ion ion-checkmark-circled"></i>
                    <input type="radio" :name="ans.id" :value="ans.id+'-N'">  否
                  </label>
                </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="form-title clearFix">
        <p>相关照片</p>
      </div>
      <div class="form-group uploadimage" id="uploadimage">
        <ul>
          <li v-for="(img,index) in imgs">
            <img :src="img" @click="previewImg(img)"/>
            <i class="ion ion-ios-close" v-if="$route.query.state != 1 && $route.query.state != 2" @click.stop.prevent="delImg(img,index)"></i>
          </li>
          <li>
            <a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state != 1 && $route.query.state != 2 && imgs.length < 6">
              <i class="ion ion-android-add fontcompany"></i>
              <!-- <span class="bluecolor block">点击上传照片</span> -->
            </a>
          </li>     
        </ul>      
      </div>
      <p class="tipscar">注：车体外观和仪表盘公里数，需要各拍一张</p>
      <div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
        <button type="button" class="" @click="savenm(0)">保存</button>
        <button type="button" class="" @click="savenm(1)">保存并提交</button>
      </div>
    </form>
    <loading v-if="loadShow"></loading>
    <toast v-if="toastShow" :message="tipMessage"></toast>
    <transition name="slide">
        <tips v-show="tipsShow" :tips="tipsMessage"></tips>
    </transition>
  </div>
</template>


<script type="text/javascript">
  import { Datetime, XInput } from 'vux'

  import wx from 'weixin-js-sdk'

  import jssdk from '../../assets/js/jssdk/wxJSSDK'

  import safeUrl from '../../assets/js/insterface'

  import chooseUserlist from '../../components/safereport/userListCar.vue'

  import vaild from '../../assets/js/vaild_form'

  import http from '../../assets/js/http_mixin'

  export default {
    data () {
      return {
        stateX:true,

        isSubmit:true,// 防止保存和提交短事件内触发多次

        driveName:'',

        tipMessage:'',

        list:{
          id:'',
          depId:'',   //部门
          driveNo:'',     // 驾驶人编号
          checkTime:'',   // 车检日期
          checkCity:'',   // 车检城市
          driveNumber:'', // 行驶证
          carNumber:'',   // 车牌号
          carModel:'',    // 车辆型号
          tollerlist:[],  //答案数组

          carImg:'',  //图片
          state:''
        },

        carSelect:[],  // 车辆数组
        answerList:[],  //问题数组

        imgs:[],
        missImgs:[],

        idx:0,
        idx2:0
      }
    },
    mixins:[jssdk, http, vaild],
    components:{
      chooseUserlist,
      Datetime,
      XInput
    },
    mounted() {
      document.title="车检";
      this.list.driveNo = this.$route.query.empNo;
      this.selectData();
      this.init();
      this.stateX = this.$route.query.state ? true : false;      
    },
    methods: {
      selectData() {
        // debugger;
        // if(!this.$route.query.state){
          this.$http.post(safeUrl.checkGetData,{empNo:this.list.driveNo},{emulateJSON: true})
          .then((response) =>{
            console.log(response.data);

            var empInfo = response.data.empInfo;
            this.driveName = empInfo.driveName;


            this.list.depId = empInfo.depId;
            this.list.checkTime = empInfo.checkTime;
            this.list.checkCity = empInfo.checkCity;
            this.list.driveNumber = empInfo.driveNumber;
            this.list.carNumber = empInfo.carNumber;
            this.list.carModel = empInfo.carModel;
            // debugger;
           // const d = new Date();
           // this.list.checkTime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
           // this.carSelect = response.data.carModelInfo;
           // this.list.carModel = response.data.carModelInfo[0].typeKey;
           this.answerList = response.data.selectInfo;
           // // debugger;
           // var empList = response.data.empInfo;
           // this.list.depId = empList.depId;
           // this.list.submitNo = empList.employeeSn;
           this.enterData();

           setTimeout(()=>{
              this.tagChage();
           },10)
           
          })
          .then(function(response){
            console.log(response)
          })
        // }
      },
      enterData() {
        if(this.$route.query.state){
          this.getData();
          var form = document.forms[0];
          for ( var i = 0; i < form.length; i++) {
            var element = form.elements[i];
            element.disabled = true;
          }
          // document.getElementById("checkTime").disabled = false;
        }else if(this.$route.query.id){
          this.getData();
        }
      },
      getData() {
        this.$http.post(safeUrl.checkUpdate,{id:this.$route.query.id},{emulateJSON: true})
        .then((response) =>{

          // debugger;
          var baseData = response.data.VehicleCheckInfo;
          var answerData = response.data.tollerlist

          this.list = {
            id:baseData.id,
            depId:baseData.depId,
            driveNo:baseData.driveNo,
            checkTime:baseData.checkTime,
            checkCity:baseData.checkCity,
            driveNumber:baseData.driveNumber,
            carNumber:baseData.carNumber,
            carModel:baseData.carModel,
            tollerlist:answerData
          }

          this.emccName =  baseData.driveName;

          var radioArrList = document.querySelectorAll("input[type=radio]");
          for(var i=0; i<radioArrList.length; i++){
            if(answerData.indexOf(radioArrList[i].value) != -1){
              radioArrList[i].setAttribute('checked','checked');
              if(this.$route.query.state){
                radioArrList[i].parentNode.firstChild.style.display="inline";
              }
            }
          }

          if(this.$route.query.state != 0){
            var form = document.forms[0];
            for ( var i = 0; i < form.length; i++) {
              var element = form.elements[i];
              element.disabled = true;
            }
          }
          // document.getElementById("checkTime").disabled = false;

          if(baseData.carImg != "" && baseData.carImg != null){
            const imgArr = baseData.carImg.split(",")
            for(var j=0; j<imgArr.length; j++){
              this.missImgs.push(imgArr[j]);
            }
            this.imgs = imgArr;
          }

          console.log('修改的时候:' + JSON.stringify(response.data))
        })
        .then(function(response){
          //console.log(response)
        })
      },
      getSig() {
        var vue = this;
        var chooseImageID = [];
        this.imageApi({
          chooseImage:{
            count:6 - vue.imgs.length,
            success:function(res){
              chooseImageID = res.localIds;
              if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
                vue.getLocalImg(chooseImageID);    
              }else{
                for(var i=0; i<chooseImageID.length; i++){
                  vue.imgs.push(chooseImageID[i]);
                }
              } 
              // vue.imglength = vue.imgs.length;
              vue.syncUpload(chooseImageID);
              console.log("gongsi------------" + chooseImageID);
            }
          }
        })
      },
      getLocalImg(eve){
        var _this = this;
        _this.imageApi({
          getLocalImgData:{
            localId: eve[_this.idx2].toString(),
            success: function (res) {
              _this.idx2++;
              _this.imgs.push(res.localData.toString());
              if (_this.idx2 < eve.length) {
                _this.getLocalImg(eve);   
              } else {
                _this.idx2 = 0;
              }
            }
          }
        });    
      },
      previewImg(img) {
        var vue = this;
        this.imageApi({
          previewImage:{
            current:img,
            urls:vue.imgs
          }
        })
      },
      syncUpload (localIds){
        var vue = this;
        this.imageApi({
          uploadImage:{
            localId:localIds[vue.idx].toString(),
            success:function(res){
              vue.idx++;
              vue.missImgs.push(res.serverId);
              if(vue.idx<localIds.length){
                vue.syncUpload(localIds);
              }else{
                vue.idx = 0;
              }
            }
          }
        })
      },
      savenm(e) {
        // debugger;
        if(e == 1){
          if(this.missImgs.length < 2){
              var vue = this;
              this.tipsShow = true;
              this.tipsMessage = "图片不能少于2张";
              window.setTimeout(function () {
                /*两秒后，弹窗消失*/
                vue.tipsShow = false;
                vue.tipsMessage = '';
              }, 2000);

              return false
          }

        }
        
        var vue = this;
        // console.log('看看这个数组里面有啥：' + JSON.stringify(this.userListArr));
        this.list.state = e;
        this.list.carImg = this.missImgs.join(",");

        var listRadio = [];
        var radioArrList = document.querySelectorAll("input[type=radio]");
        for(var i=0; i<radioArrList.length; i++){
          if(radioArrList[i].checked){
            listRadio.push(radioArrList[i].value);
          }
        }

        this.list.tollerlist = listRadio;
        // console.log(listRadio);
        if(this.isSubmit){
					this.isSubmit = false;
					setTimeout(function (){
						this.isSubmit= true;
					},2000);

          this.getInfo({
            url:safeUrl.checkSave,
            param:this.list,
            success:function(response){
              vue.toastShow = true;
              vue.tipMessage = response.data.msg;
              setTimeout(function(){
                vue.toastShow = false;
                window.history.go(-1);
              },1500);
              console.log(response.data);
            },
            fail:function(response){

            }
          })
        }
      },
      delImg(img,i) {
        this.missImgs.splice(i,1);
        this.imgs.splice(i,1);
      },
      tagChage() {
        let totleTip = document.getElementsByClassName("totletip");
        for(let i=0; i<totleTip.length; i++){
          totleTip[i].onclick = function(){
            // debugger;
            if(this.nextElementSibling.style.display && this.nextElementSibling.style.display == 'none'){
              this.childNodes[1].classList.add("ion-chevron-down");
              this.childNodes[1].classList.remove("ion-chevron-up");
              this.nextElementSibling.style.display = 'block';
            }else{
              this.childNodes[1].classList.remove("ion-chevron-down");
              this.childNodes[1].classList.add("ion-chevron-up");
              this.nextElementSibling.style.display = 'none';
            }

          }
        }
      }
    }
  }
</script>
